<template>
	<div class="account-record">
		<list-title :data="header"></list-title>
		<div class="search">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="客户名称">
					<el-input v-model="searchForm.company_name" placeholder="客户名称"></el-input>
				</el-form-item>
				<el-form-item label="添加时间">
					<el-date-picker
					v-model="searchForm.regTime"
					type="daterange"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<list-table :list="recordList" :tableLoading="tableLoading" :footer="true" :pagination="pagination">
			<template v-slot:data>
				<el-table-column prop="companyname" label="企业名称"></el-table-column>
				<el-table-column prop="flag" label="类型">
					<template slot-scope="scope">
						{{ formatFlag(scope.row.flag) }}
					</template>
				</el-table-column>
				<el-table-column prop="year" label="年数">
					<template slot-scope="scope">
						{{ scope.row.flag == 1?"-":scope.row.year }}
					</template>
				</el-table-column>
				<el-table-column prop="amount" label="金额"></el-table-column>
				<el-table-column prop="paymode" label="支付方式">
					<template slot-scope="scope">
						{{ formatPaymode(scope.row.paymode) }}
					</template>
				</el-table-column>
				<el-table-column prop="creater" label="操作账号"></el-table-column>
				<el-table-column prop="remark" label="备注"></el-table-column>
				<el-table-column prop="addTime" label="添加时间"></el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {filterEmpty} from "static/js/common.js"
export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '资金记录',
				reload: true
			},
			/*搜索*/
			searchForm: {
				company_name: this.$route.query.company_name,
				regTime: (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:'',
			},
			/*数据列表*/
			recordList: [
				{
					id: 1,
					comid: '12345678',
					companyname: '腾讯',
					flag: 1,//使用类型 1-充值 2-购买应用 3-续费
					year: 1,
					amount: 1,
					paymode: 1,//支付方式 1-后台管理充值 2-微信 3-支付宝
					creater: '',
					remark: '',
					addTime: '2019-09-09 08:08:08',
				}
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {		
		/*获取所有客户资金记录数据*/
		this.getRecordList()
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getRecordList()
			/*点击navbar的时候，路由产生变化*/
			this.searchForm.company_name = this.$route.query.company_name
			this.searchForm.regTime = (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:''
		}
	},
	methods: {
		/*获取客户资金记录数据*/
		getRecordList: function(){
			this.$get(this.$api.RecordList, this.$route.query).then(res => {
				// console.log(res);
				if(res.data.code === 0){
					if(res.data.data.list != undefined){
						this.recordList = []
						Object.keys(res.data.data.list).forEach((k) => {
							this.recordList.push ({
								id: res.data.data.list[k].rid,
								comid: res.data.data.list[k].comid,
								companyname: res.data.data.list[k].companyname,
								flag: res.data.data.list[k].flag,
								year: res.data.data.list[k].year,
								amount: res.data.data.list[k].amount,
								paymode: res.data.data.list[k].paymode,
								creater: res.data.data.list[k].creater,
								remark: res.data.data.list[k].remark,
								addTime: res.data.data.list[k].add_time
							});
						})
						this.pagination = res.data.data.pageInfo
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*搜索提交*/
		searchSubmit: function(){
			let query = filterEmpty(JSON.parse(JSON.stringify(this.searchForm)))
			if(query.regTime != undefined){
				query = Object.assign({begin_time: query['regTime'][0], end_time: query['regTime'][1]}, query)
				delete query['regTime']
			}
			// console.log(query)
			this.$router.push({query})
		}
	},
    computed: {
		/*记录类型*/
		formatFlag() {
			return (flag)=> {
				switch(flag) {
					case '1':
						return "充值";
						break;
					case '2':
						return "开通";
						break;
					case '3':
						return "续费";
						break;
					default:
						return "";
						break;
				}
			}
		},
		/*支付方式*/
		formatPaymode() {
			return (paymode)=> {
				switch(paymode) {
					case '1':
						return "后台";
						break;
					case '2':
						return "微信";
						break;
					case '3':
						return "支付宝";
						break;
					default:
						return "";
						break;
				}
			}
		}
    }
};
</script>

<style lang="stylus" scoped>
.flag1 {
	color: #b0fff5
}
.flag2, .flag3 {
	color: #ffb0b0
}
</style>